﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ucSlider.ascx.cs" Inherits="Controls_ucSlider" %>
<%--<script language="javascript">
    $(document).ready(function () {
        BindSlider(<%=Module_id %>, '<%=this.ClientID %>');
    });
</script>
<div class="slider-wrap" id="<%=this.ClientID %>">
</div>--%>
<div class="slider-wrap">
    <div id="main-photo-slider" class="csw">
        <div class="panelContainer">
            <asp:Repeater ID="rptMain" runat="server">
                <ItemTemplate>
                    <div class="panel" title="Panel <%#Container.ItemIndex+1 %>">
                        <div class="wrapper">
                            <img src="../upload/products/<%#Eval("THUMB_IMAGE") %>" alt="temp" />
                            <div class="photo-meta-data">
                                <a href="index.aspx?cid=-4&id=<%#Eval("PRODUCT_ID") %>">
                                    <%#Eval("PRODUCT_NAME") %></a><br />
                                <span>
                                    <%#LibraryO2S.O2S_StringUtil.Substring(Eval("PRODUCT_DESCRIPTION").ToString(),0,100) %></span>
                            </div>
                        </div>
                    </div>
                </ItemTemplate>
            </asp:Repeater>
            <%--<div class="panel" title="Panel 1">
                <div class="wrapper">
                    <img src="images/tempphoto-1.jpg" alt="temp" />
                    <div class="photo-meta-data">
                        Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
                        <span>"Free Tibet" Protest at the Olympic Torch Rally</span>
                    </div>
                </div>
            </div>
            <div class="panel" title="Panel 2">
                <div class="wrapper">
                    <img src="images/tempphoto-2.jpg" alt="temp" />
                    <div class="photo-meta-data">
                        Chicago Bears at Seattle Seahawks<br />
                        <span>Fifth field goal, overtime win for the Seahawks</span>
                    </div>
                </div>
            </div>
            <div class="panel" title="Panel 3">
                <div class="wrapper">
                    <img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft" />
                    <h1>
                        How to Cook a Scotch Egg</h1>
                    <ul>
                        <li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage,
                            then stick them in the coldest part of the fridge to firm up)</li>
                        <li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage,
                            white pepper, salt and a tiny bit of maple syrup)</li>
                        <li>1/2 cup AP flour</li>
                        <li>1-2 eggs, beaten</li>
                        <li>3/4 cup panko-style bread crumbs</li>
                        <li>Vegetable oil for frying</li>
                    </ul>
                </div>
            </div>
            <div class="panel" title="Panel 4">
                <div class="wrapper">
                    <img src="images/tempphoto-4.jpg" alt="temp" />
                    <div class="photo-meta-data">
                        A Poem by Shel Silverstein<br />
                        <span>Falling Up</span>
                    </div>
                </div>
            </div>
            <div class="panel" title="Panel 5">
                <div class="wrapper">
                    <img src="images/tempphoto-5.jpg" alt="temp" />
                    <div class="photo-meta-data">
                        New Video on CSS-Tricks<br />
                        <span>Using Wufoo for Web Forms</span>
                    </div>
                </div>
            </div>
            <div class="panel" title="Panel 6">
                <div class="wrapper">
                    <h1>
                        A Tale of Two Cities</h1>
                    <p>
                        <em>Charles Dickins</em></p>
                    <blockquote>
                        It was the best of times, it was the worst of times, it was the age of wisdom, it
                        was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity,
                        it was the season of Light, it was the season of Darkness, it was the spring of
                        hope, it was the winter of despair, we had everything before us, we had nothing
                        before us, we were all going direct to heaven, we were all going direct the other
                        way - in short, the period was so far like the present period, that some of its
                        noisiest authorities insisted on its being received, for good or for evil, in the
                        superlative degree of comparison only.</blockquote>
                </div>
            </div>--%>
        </div>
    </div>
    <%--<a href="#1" class="cross-link active-thumb">
        <img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>--%>
    <div id="movers-row">
        <asp:Repeater ID="rptThumb" runat="server">
            <ItemTemplate>
                <div>
                    <a href="#<%#Container.ItemIndex+1 %>" class="cross-link">
                        <img src="../upload/products/<%#Eval("THUMB_IMAGE") %>" class="nav-thumb" alt="temp-thumb" />
                    </a>
                </div>
            </ItemTemplate>
        </asp:Repeater>
        <%--<div>
            <a href="#3" class="cross-link">
                <img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>--%>
        <!--<div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
			<div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
			<div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>-->
    </div>
    <div class="slider_navigator">
        <img src="../Images/btn_next.png" id="next_slide" />
        <span id="current">3/12</span>
        <img src="../Images/btn_back.png" id="back_slide" />
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#next_slide").click(function () {
                if ($(".panelContainer > div").size() == curclicked)
                    curclicked = 0;
                theInterval(curclicked + 1);
                return false;
            });
            $("#back_slide").click(function () {
                if (0 == curclicked)
                    curclicked = $(".panelContainer > div").size();
                theInterval(curclicked - 1);
                return false;
            });
        });

    </script>
</div>
